<template>
  <div>
    <div class="list"  v-for="(item,index) in list" :key="index">
      <div class="listItems">
        <div class="listTopCotent flex-space-between">
          <div class="items flex-start">{{item.title}}</div>
          <div class="items flex-start" @click="showBonusButton(item)">
            {{item.created_at}}
            <img v-if="bonusButtonShow" src="http://job.dayinyun.com/bonusTopIcon.png" alt="">
            <img v-else src="http://job.dayinyun.com/bonusBottomIcon.png" alt="">
          </div>
        </div>
        <div v-if="bonusButtonShow" class="listBootomCotent flex-space-between">
          <div class="money">
            本月收益
            {{bonusMoney}}
          </div>
          <div class="button flex-end">
            <button v-if="item.is_show_button" @click.stop="confirmBalance(item)">确认收入</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {GETBONUSMONEY} from "../../../apis/mine";

  export default {
    data() {
      return {
        grayButton: true,//灰色按钮
        bonusButtonShow:false,//箭头
        bonusMoney:0,//分红金额
      }
    },
    props:['list'],
    methods:{
      // 点击箭头展示确认收入按钮
      showBonusButton(item){
        this.bonusButtonShow = !this.bonusButtonShow
        this.getBonusMoney(item)
      },
      // 确认收入
      confirmBalance(item){
        this.$emit("confirmBalance",item)
      },
      // 获取分红金额
      getBonusMoney(item){
        let getBonusMoney = GETBONUSMONEY
        let params = {
          poll_id:item.id
        }
        getBonusMoney(params).then(res=>{
          if(res.data.code*1===200){
            this.bonusMoney = res.data.data.wait_receive_money
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error=>{
          console.log(error)
        })
      },
    }
  }
</script>

<style lang='less' scoped>
  @import (reference) url(../../../assets/less/common);
  .list{
    width:100%;
    margin-bottom: 0.56rem;
    .listItems{
      width:100%;
      .listTopCotent{
        .items{
          font-size:@fontSize30;
          font-family:@fontFamily400;
          font-weight:@fontWeight500;
          line-height:0.5rem;
          color:#ffffff;
          img{
            width:0.28rem;
            height:auto;
            margin-left:0.16rem;
          }
        }
      }
      .listBootomCotent{
        margin-top:0.28rem;
        .money{
          font-size:@fontSize28;
          font-family:@fontFamily400;
          font-weight:@fontWeight500;
          line-height:0.4rem;
          color:#999999;
        }
        .button{
          button{
            width:1.64rem;
            height:0.56rem;
            border:0.02rem solid #F50000;
            background:#000000;
            border-radius: 0.3rem;
            font-size:@fontSize30;
            font-family:@fontFamily400;
            font-weight:@fontWeight500;
            line-height:0.4rem;
            color:#F50000;
          }
          .grayButton{
            border:none;
            color:#999999;
            background:none;
          }
        }
      }
    }
  }
</style>
